<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <!--引入重置样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--引入公用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--引入插件样式-->
    <link rel="stylesheet" href="css/shopCart.css">
    <!-- 引入蒙层 -->
    <link rel="stylesheet" href="css/remodal.css">
    <link rel="stylesheet" href="css/remodal-default-theme.css">
    <!---->
    <link rel="stylesheet" href="css/06-shopCar.css">

    <!--引入jQuery-->
    <script src="./js/jquery.min.js"></script>
    <!--引入当前页js-->
    <script src="./js/06-shopCar.js"></script>
    <!--蒙层js-->
    <script src="./js/remodal.js"></script>
    <!--引入插件js-->
    <script src="./js/cart.js"></script>

</head>

<body>
    <!--header-->
    <header>
        <div id="topBar" class="container-fluid">
            <div class="container login clearfix">
                <div id="logo" class="fl">
                    <a href="./01-index.html"><img class="pic" src="./images/jiesuan.jpg" alt=""></a>
                </div>
                <span class="web fl">legochina.cn</span>
                <p class="fr">欢迎光临<span class="colorf60">乐购</span>，请 <a href="">登录</a>\<a href="">注册</a></p>
            </div>

        </div>
        <!--searchBox-->
        <div class="container">
            <div id="searchBox" class="clearfix">
                <form action="#" method="get" class="fr">
                    <input type="text" class="searchContent1 fl" placeholder="创意文具">
                    <input type="submit" class="searchButton1 fl" value="">
                </form>
                <!--引入location插件-->

            </div>
        </div>


        <div id="border_btm" class="container-fluid"></div>
    </header>

    <!--shopCar-->
    <section id="shopCar" class="container mt50">
        <p class="fs18 color4d">填写并核对订单信息</p>
        <!--表头-->
        <div id="cartTitle">
            <div class="box90 areaCenter">
                <input type="checkbox" class="checkAll" value="" /> 全选
            </div>
            <div class="box550 areaCenter">
                商品
            </div>
            <div class="box120">
                单价
            </div>
            <div class="box190">
                <p class="marginLeft45">数量</p>
            </div>
            <div class="box130">
                小计
            </div>
            <div class="box120">
                操作
            </div>
            <div class="clear"></div>
        </div>
        <!--商品1-->
        <div class="cartContent" style="border-top: solid 6px #ccc;">
            <div class="box90 areaCenter">
                <input type="checkbox" class="rowsCheck" name="rowsCheck" value="" />
            </div>
            <div class="box550">
                <img src="./images/index08_05.jpg" />从你的全世界路过
            </div>
            <div class="box120 rowsPrice">
                41.50
            </div>
            <div class="box190 ">
                <ul class="buyNumCon">
                    <li class="minus">-</li>
                    <li class="buyNumInput"><input class="buyNumInput buyNumber" type="text" name="buyNum"
                            value="1" /><span class="errMessage">*数据不合法</span></li>
                    <li class="add">+</li>
                </ul>
            </div>
            <div class="box130 rowsSumPrice" style="color:#f60;font-size:16px;">
                41.50
            </div>
            <div class="box120">
                <p class="delRows">删除</p>
                <p class="move">移到我的关注</p>
            </div>
            <div class="clear"></div>
        </div>
        <!-- 商品2 -->
        <div class="cartContent">
            <div class="box90 areaCenter">
                <input type="checkbox" class="rowsCheck" name="rowsCheck" value="" />
            </div>
            <div class="box550">
                <img src="./images/index08_05.jpg" />从你的全世界路过
            </div>
            <div class="box120 rowsPrice">
                41.50
            </div>
            <div class="box190 ">
                <ul class="buyNumCon">
                    <li class="minus">-</li>
                    <li class="buyNumInput"><input class="buyNumInput buyNumber" type="text" name="buyNum"
                            value="1" /><span class="errMessage">*数据不合法</span></li>
                    <li class="add">+</li>
                </ul>
            </div>
            <div class="box130 rowsSumPrice" style="color:#f60;font-size:16px;">
                41.50
            </div>
            <div class="box120">
                <p class="delRows">删除</p>
                <p class="move">移到我的关注</p>
            </div>
            <div class="clear"></div>
        </div>
        <!-- 商品3 -->
        <div class="cartContent">
            <div class="box90 areaCenter">
                <input type="checkbox" class="rowsCheck" name="rowsCheck" value="" />
            </div>
            <div class="box550">
                <img src="./images/index08_05.jpg" />从你的全世界路过
            </div>
            <div class="box120 rowsPrice">
                41.50
            </div>
            <div class="box190 ">
                <ul class="buyNumCon">
                    <li class="minus">-</li>
                    <li class="buyNumInput"><input class="buyNumInput buyNumber" type="text" name="buyNum"
                            value="1" /><span class="errMessage">*数据不合法</span></li>
                    <li class="add">+</li>
                </ul>
            </div>
            <div class="box130 rowsSumPrice" style="color:#f60;font-size:16px;">
                41.50
            </div>
            <div class="box120">
                <p class="delRows">删除</p>
                <p class="move">移到我的关注</p>
            </div>
            <div class="clear"></div>
        </div>
        <!--结算-->
        <div class="container mt30 clearfix">
            <div class="fl" id="goPayLeft">
                <div class="fl box90 areaCenter">
                    <input type="checkbox" class="checkAll" value="" /> 全选
                </div>
                <div class="fl">
                    <a href="javascript:void(0)" id="delSelectedProduct">删除选中的商品</a>
                </div>
                <div class="fr box160 areaCenter">
                    <span class="fs20">总价：</span><span class="fs18 colorf60" id="totalPrice">0</span>
                </div>
                <div class="fr box160 areaCenter">
                    已选择&nbsp;<span class="fs18 colorf60" id="selectedNum">0</span>&nbsp;件商品
                </div>
            </div>
            <div class="fl">
                <a href="#modal"><input type="button" id="goPay" value="去结算" /></a>
            </div>
        </div>

    </section>

    <!-- guess -->
    <section id="guess" class="container mt50">
        <div class="title bd_bottom6 clearfix">
            <p class="fl fs20 bgcolorf60 colorfff">猜你喜欢</p>
        </div>
        <div class="bookListModel">
            <ul class="sales clearfix">
                <li>
                    <img class="book" src="./images/baiyexing.png" alt="">
                    <p><img class="dz" src="./images/bazhe.png" alt=""></p>
                    <p class="fs16 ml10">白夜行&nbsp;东野上吾</p>
                    <p class="colorf42 ml10 fs14">推荐：<img class="score" src="./images/sixingban.png" alt=""></p>
                    <p class="ml10 fs16"><span class="colorf42">￥：38 &nbsp;&nbsp; </span>
                        <del class="colorc0">￥：58</del>
                    </p>
                </li>
                <li>
                    <img class="book" src="./images/baiyexing.png" alt="">
                    <p><img class="dz" src="./images/bazhe.png" alt=""></p>
                    <p class="fs16 ml10">白夜行&nbsp;东野上吾</p>
                    <p class="colorf42 ml10 fs14">推荐：<img class="score" src="./images/sixingban.png" alt=""></p>
                    <p class="ml10 fs16"><span class="colorf42">￥：38 &nbsp;&nbsp; </span>
                        <del class="colorc0">￥：58</del>
                    </p>
                </li>
                <li>
                    <img class="book" src="./images/baiyexing.png" alt="">
                    <p><img class="dz" src="./images/bazhe.png" alt=""></p>
                    <p class="fs16 ml10">白夜行&nbsp;东野上吾</p>
                    <p class="colorf42 ml10 fs14">推荐：<img class="score" src="./images/sixingban.png" alt=""></p>
                    <p class="ml10 fs16"><span class="colorf42">￥：38 &nbsp;&nbsp; </span>
                        <del class="colorc0">￥：58</del>
                    </p>
                </li>
                <li>
                    <img class="book" src="./images/baiyexing.png" alt="">
                    <p><img class="dz" src="./images/bazhe.png" alt=""></p>
                    <p class="fs16 ml10">白夜行&nbsp;东野上吾</p>
                    <p class="colorf42 ml10 fs14">推荐：<img class="score" src="./images/sixingban.png" alt=""></p>
                    <p class="ml10 fs16"><span class="colorf42">￥：38 &nbsp;&nbsp; </span>
                        <del class="colorc0">￥：58</del>
                    </p>
                </li>
                <li>
                    <img class="book" src="./images/baiyexing.png" alt="">
                    <p><img class="dz" src="./images/bazhe.png" alt=""></p>
                    <p class="fs16 ml10">白夜行&nbsp;东野上吾</p>
                    <p class="colorf42 ml10 fs14">推荐：<img class="score" src="./images/sixingban.png" alt=""></p>
                    <p class="ml10 fs16"><span class="colorf42">￥：38 &nbsp;&nbsp; </span>
                        <del class="colorc0">￥：58</del>
                    </p>
                </li>
            </ul>
        </div>
    </section>

    <!--footer-->
    <footer id="footer" class="mt50">
        <div class="footerBd container-fluid">
        </div>
        <div class="adbanner container">
            <img class="adPic" src="./images/adbanner.png" alt="">
        </div>
        <!--公司服务-->
        <div class="serviceImg container-fluid areaCenter">
            <img src="./images/222_11.png" alt="">
            <img src="./images/222_13.png" alt="">
            <img src="./images/222_15.png" alt="">
            <img src="./images/222_17.png" alt="">
        </div>
        <div class="serviceList container">
            <div class="listBox areaCenter clearfix">
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>发票制度</dd>
                    <dd>账户管理</dd>
                    <dd>会员优惠</dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>发票制度</dd>
                    <dd>账户管理</dd>
                    <dd>会员优惠</dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>发票制度</dd>
                    <dd>账户管理</dd>
                    <dd>会员优惠</dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>发票制度</dd>
                    <dd>账户管理</dd>
                    <dd>会员优惠</dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>发票制度</dd>
                    <dd>账户管理</dd>
                    <dd>会员优惠</dd>
                </dl>
            </div>
            <a href="#"><img src="./images/logo_00.png" alt=""></a>
        </div>
        <!--版权信息-->
        <div class="container copyright areaCenter">
            <p>
                <a href="#">公司简介</a>|
                <a href="#">Investor Relations</a>|
                <a href="#">网站联盟</a>|
                <a href="#">乐购招商</a>|
                <a href="#">机构销售</a>|
                <a href="#">手机乐购</a>|
                <a href="#">官方Blog</a>|
                <a href="#">热词搜索</a>
            </p>
            <p class="mt20 mb100">
                Copyright (C) 乐购网 2004-2016, All Rights Reserved
            </p>
        </div>
    </footer>

    <!--蒙层的弹出样式-->
    <div class="remodal-wrapper remodal-is-closed" style="display: none;">
        <div class="remodal remodal-is-initialized remodal-is-closed" data-remodal-id="modal" role="dialog"
            aria-labelledby="modal1Title" aria-describedby="modal1Desc" tabindex="-1">
            <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
            <div>
                <h2 id="modal1Title">确认付款</h2>
                <p id="modal1Desc">
                    <img src="./images/gantan.jpg" alt="">
                    <span class="fs20">是否去确认提交订单？</span>
                </p>
            </div>
            <br>
            <button data-remodal-action="cancel" class="remodal-cancel">取消</button>
            <button data-remodal-action="confirm" class="remodal-confirm">确认</button>
        </div>
    </div>
    
    
</body>

</html>